import { ProCard } from "@ant-design/pro-components";
import { Button, Drawer, Form, Input, Select } from "antd";

import React, { useState } from "react";

const { Option } = Select;

const Page20: React.FC = () => {
  const [open, setOpen] = useState(false);
  const [form] = Form.useForm();

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };

  const onFinish = (values: any) => {
    console.log("表单数据:", values);
    setOpen(false);
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>抽屉表单页面</h1>
      <ProCard>
        <Button type="primary" onClick={showDrawer}>
          打开抽屉表单
        </Button>

        <Drawer
          title="用户信息表单"
          width={520}
          onClose={onClose}
          open={open}
          bodyStyle={{ paddingBottom: 80 }}
          extra={<Button onClick={onClose}>取消</Button>}
        >
          <Form form={form} layout="vertical" onFinish={onFinish}>
            <Form.Item
              name="name"
              label="姓名"
              rules={[{ required: true, message: "请输入姓名" }]}
            >
              <Input placeholder="请输入姓名" />
            </Form.Item>

            <Form.Item
              name="email"
              label="邮箱"
              rules={[
                { required: true, message: "请输入邮箱" },
                { type: "email", message: "请输入有效的邮箱地址" },
              ]}
            >
              <Input placeholder="请输入邮箱" />
            </Form.Item>

            <Form.Item
              name="department"
              label="部门"
              rules={[{ required: true, message: "请选择部门" }]}
            >
              <Select placeholder="请选择部门">
                <Option value="tech">技术部</Option>
                <Option value="product">产品部</Option>
                <Option value="operation">运营部</Option>
              </Select>
            </Form.Item>

            <Form.Item name="description" label="描述">
              <Input.TextArea rows={4} placeholder="请输入描述" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
        </Drawer>
      </ProCard>
    </div>
  );
};

export default Page20;
